import React, { useEffect } from "react";
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
Spreadsheet.locale("zh-cn", zhCN);

/** 在线excel 2个大坑
 *  1、需要在public/index.html 加载css文件，不然excel的工具条不会出现，官方bug
 * <link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
 * 下面2个js 可以注释
    // <script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
    // <script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/locale/zh-cn.js"></script>

 * 2、设置中文需要加载 x-data-spreadsheet/src/locale/zh-cn 官方的加载是错误的
 */

export default function ExcelPage() {
  useEffect(() => {
    const s = new Spreadsheet(
      "#my-excel", // default options
      {
        mode: "edit", // edit | read
        showToolbar: true,
        showGrid: true,
        showContextmenu: true,
        row: {
          len: 100,
          height: 25,
        },
        col: {
          len: 26,
          width: 100,
          indexWidth: 60,
          minWidth: 60,
        },
      }
    )
      .loadData({})
      .change((data) => {
        console.log(data);
      });

    s.validate();

    // event of click on cell
    s.on("cell-selected", (cell, ri, ci) => {
      console.log(1111)
    });
    s.on("cells-selected", (cell, { sri, sci, eri, eci }) => {
      console.log(2222)
    });
    // edited on cell
    s.on("cell-edited", (text, ri, ci) => {
      console.log(text, ri, ci)
    });
    s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
  });
  return (
    // <div style={{ height: "600px", width: "800px" }}>
      <div id="my-excel"></div>
    // </div>
  );
}
